<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商户">
                <a-input placeholder="请输入商户名" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input placeholder="请输入手机号码" v-model="queryParam.tel" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="tablePageChange(1)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :bordered="false" class="card_style_re" style="margin-top: 16px">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.is_enable" @change="tablePageChange(1)">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="0"> 已禁用 </a-radio-button>
          <a-radio-button value="1"> 已启用 </a-radio-button>
        </a-radio-group>

        <a-button @click="toEdit()" type="primary" icon="plus">新建</a-button>
      </div>
      <a-table
        ref="table"
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
          current: queryParam.page,
        }"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
      >
        <div slot="userName" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.user_avatar" alt="" />
            </div>
            <div class="info">
              <span>{{ record.user_name || '-' }}</span>
              <!-- <span v-if="record.saas_user_id > 0">ID: {{ record.saas_user_id }}</span> -->
              <span v-if="record.saas_user_id > 0">{{ record.cloud_store.tel }}</span>
            </div>
          </div>
        </div>
        <!-- <div slot="name" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.cloud_store.logo" alt="" />
            </div>
            <div class="info">
              <span>{{ record.cloud_store.name }}</span>
              <span>{{ record.cloud_store.tel }}</span>
            </div>
          </div>
        </div> -->
        <div slot="storeName" slot-scope="text, record">
          <div class="name">
            <!-- <div class="pic">
              <img :src="record.store_logo" alt="" />
            </div>
            <div class="info"> -->
            <span>{{ record.store_name || '-' }}</span>
            <!-- <span>{{ record.category_name || '-' }}</span>
            </div> -->
          </div>
        </div>

        <!-- <span slot="mobile" slot-scope="scope"> {{ scope.name }} / {{ scope.mobile }} </span> -->
        <span slot="audit_time" slot-scope="text">
          {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>

        <!-- <div slot="tel" slot-scope="text, goods"></div> -->
        <!-- <div slot="id_card_front" slot-scope="text">
          <img :src="text" alt="" class="pic" />
        </div>
        <div slot="id_card_reverse" slot-scope="text">
          <img :src="text" alt="" class="pic" />
        </div>
        <div slot="certificate" slot-scope="text">
          <img :src="text" alt="" class="pic" />
        </div> -->
        <div slot="action" slot-scope="scope">
          <a-button type="link" size="small" @click="toRecharge(scope)" v-if="scope.can_recharge === 1">充值</a-button>
          <a-divider type="vertical" style="margin: 0 1px" />
          <a-dropdown>
            <a-button type="link" size="small"> 更多 <a-icon type="down" /> </a-button>
            <a-menu slot="overlay">
              <a-menu-item v-if="scope.store_id > 0">
                <a-button type="link" size="small" @click="toSetCloudPlatform(scope)">设置云仓供货商</a-button>
              </a-menu-item>
              <!-- <a-menu-item>
                <a-button type="link" size="small" @click="toEdit(scope)">编辑</a-button>
              </a-menu-item> -->
              <a-menu-item>
                <a-button type="link" size="small" @click="delBusiness(scope)">删除</a-button>
              </a-menu-item>
              <a-menu-item>
                <a-button type="link" size="small" @click="setMchLevel(scope)">修改等级</a-button>
              </a-menu-item>

              <a-menu-item v-if="scope.is_enable === 1">
                <a-button type="link" size="small" @click="changeStatus(scope, 0)">禁用</a-button>
              </a-menu-item>
              <a-menu-item v-if="scope.is_enable === 0">
                <a-button type="link" size="small" @click="changeStatus(scope, 1)">启用</a-button>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
        <span slot="type" slot-scope="text, scope">
          {{ scope.cloud_store.type == 0 ? '个人' : scope.cloud_store.type == 1 ? '企业' : '个体工商户' }}
        </span>
        <span slot="balance" slot-scope="text, scope"> ￥{{ scope.cloud_store.balance || '0.00' }} </span>
        <span slot="addtime" slot-scope="text, scope"> {{ scope.cloud_store.addtime }} </span>
        <span slot="is_enable" slot-scope="text">
          <div class="tagBox">
            <span class="tag" :style="text | listStatus"></span>
            <span>{{ getStatus(text) }} </span>
          </div>
        </span>
        <span slot="can_distribution" slot-scope="text">
          <a-switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            :checked="text.can_distribution === '1'"
            @change="onChange(text)"
          />
        </span>
      </a-table>
    </a-card>
    <!-- 创建商户弹窗 -->
    <a-modal
      :title="getPopTitle"
      width="800px"
      v-model="showCreated"
      @ok="editBusiness"
      :afterClose="() => closeModal('businessForm')"
      :destroyOnClose="true"
    >
      <a-form-model
        ref="businessForm"
        :model="businessForm"
        :rules="businessRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="商户类型" prop="type">
          <a-select v-model="businessForm.type" placeholder="请选择商户类型">
            <a-select-option value="0"> 个人 </a-select-option>
            <a-select-option value="1"> 企业 </a-select-option>
            <a-select-option value="2"> 个体工商户 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择用户" prop="saas_user_id">
          <div style="display: flex">
            <a-input v-model="saas_user_name" placeholder="请选择用户" disabled></a-input>
            <a-button type="primary" style="margin-left: 12px" @click="visible = true">选择</a-button>
          </div>
        </a-form-model-item>
        <a-form-model-item label="请输入手机号" prop="saas_user_mobile" v-if="saas_user_mobile === ''">
          <div style="display: flex">
            <a-input v-model="businessForm.saas_user_mobile" placeholder="请输入手机号"></a-input>
          </div>
        </a-form-model-item>
        <a-form-model-item label="地区" required>
          <Address v-model="address_info"></Address>
        </a-form-model-item>
        <a-form-model-item label="选择商城" prop="store_id" v-if="businessForm.type == 1 || businessForm.type == 2">
          <a-select v-model="businessForm.store_id" placeholder="请选择商城">
            <a-select-option :value="item.id" v-for="item of storeList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 充值弹窗 -->
    <a-modal
      title="充值"
      width="500px"
      v-model="showRecharge"
      @ok="recharge"
      :afterClose="() => closeModal('rechargeForm')"
      :destroyOnClose="true"
    >
      <a-form-model
        ref="rechargeForm"
        :model="rechargeForm"
        :rules="rechargeRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="输入金额" prop="price">
          <a-input v-model="rechargeForm.price" placeholder="请输入金额" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 设置云仓供货商 -->
    <a-modal
      title="设置云仓供货商"
      width="900px"
      v-model="showSetCloudPlatform"
      @ok="setCloudPlatform"
      :destroyOnClose="true"
    >
      <a-form-model ref="setCloudForm" :model="setCloudForm">
        <a-form-model-item
          :class="show_status.appoint_type == 2 ? '' : 'hide'"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="供货商"
          extra="点击图片删除"
        >
          <a-input-search
            @search="selectCloudPlatformModal"
            placeholder="添加供货商"
            :readOnly="true"
            :value="cloudPlatform_id_list"
          >
            <a-button @click="selectCloudPlatformModal" slot="enterButton">添加供货商</a-button>
          </a-input-search>
          <div v-if="cloudPlatform_list && cloudPlatform_list.length > 0" style="width: 100%">
            <div
              @click="cancelCloudPlatform(index, item)"
              style="float: left; width: 60px; margin: 5px 10px"
              v-for="(item, index) in cloudPlatform_list"
              :key="index"
            >
              <div style="width: 100%; height: 60px">
                <img width="100%" height="100%" :src="item.logo" alt="" />
              </div>
              <div style="width: 100%; text-align: center; overflow: hidden; height: 40px">{{ item.name }}</div>
            </div>
          </div>
        </a-form-model-item>
        <SearchCloudPlatform
          :cloudPlatform_id_list="cloudPlatform_id_list"
          v-model="select_CloudPlatform_visible"
          @onOk="selectCloudPlatformOk"
        ></SearchCloudPlatform>
      </a-form-model>
    </a-modal>
    <!-- 选择用户弹窗 -->
    <a-modal title="选择用户" style="width: 300px" v-model="visible" :destroyOnClose="true" :footer="null">
      <div style="margin-bottom: 10px">
        <a-input-search
          placeholder="输入昵称搜索"
          v-model="keyword"
          allowClear
          enter-button
          @search="$refs.table1.refresh(true)"
        />
      </div>
      <s-table ref="table1" rowKey="id" :columns="userColumns" :data="loadUserData">
        <span slot="baseinfo" slot-scope="text, record">
          <img style="width: 40px; heigth: 40px; border-radius: 3px; margin-right: 5px" :src="record.avatar" />
          <span :length="20" tooltip>{{ record.name }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
        </span>
        <span slot="status" slot-scope="scope">
          <div class="status">
            <span :class="scope.is_disable == 0 ? 'open' : 'close'"></span>
            <span>{{ scope.is_disable == 0 ? '已启用' : '已禁用' }}</span>
          </div>
        </span>
      </s-table>
    </a-modal>
    <!-- 选择用户弹窗 -->
    <a-modal title="修改等级" style="width: 300px" v-model="isSetLevel" :destroyOnClose="true"  @ok="submitMchLevel">
      <a-select
        v-model='level_id'
        style="width: 100%"
      >
        <a-select-option value="0" >
          云仓用户
        </a-select-option>
        <template v-for='(item, index) in level'>
          <a-select-option :value="item.id" >
            {{ item.name }}
          </a-select-option>
        </template>

      </a-select>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  saasBusinessList,
  creatBusiness,
  editBusiness,
  businessDel,
  recharge,
  supplierList,
  storeMchEnable,
  setCanDistribution,
  setCloudPlatform as setCP,
} from '@/api/purchase/purchase'
import { STable } from '@/components'
import tabList from '@/views/saas/components/tabList.vue'
import { getSelectUserList } from '@/api/user'
import { cyyUploadImg } from '@/components/CyyUi'
import { storeGetList } from '@/api/store'
import SearchCloudPlatform from '@/components/SearchCloudPlatform/index'
import { Address } from '@/components'
import { getUserLevel, setMchLevel } from '@/api/purchase/supplier'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '用户信息',
    width: 300,
    scopedSlots: {
      customRender: 'userName',
    },
  },
  // {
  //   title: '商户信息',
  //   width: 300,
  //   scopedSlots: {
  //     customRender: 'name',
  //   },
  // },

  {
    title: '商户类型',
    dataIndex: 'type',
    scopedSlots: {
      customRender: 'type',
    },
  },
  {
    title: '绑定店铺',
    scopedSlots: {
      customRender: 'storeName',
    },
  },
  {
    title: '会员等级',
    dataIndex: 'cloud_store.level',
  },
  {
    title: '折扣比例',
    dataIndex: 'cloud_store.profit',
  },
  {
    title: '余额',
    dataIndex: 'balance',
    scopedSlots: {
      customRender: 'balance',
    },
    sorter: (a, b) => a.cloud_store.balance - b.cloud_store.balance,
  },
  {
    title: '审核时间',
    dataIndex: 'addtime',
    scopedSlots: {
      customRender: 'addtime',
    },
    sorter: (a, b) => a.cloud_store.addtime - b.cloud_store.addtime,
  },
  {
    title: '状态',
    dataIndex: 'is_enable',
    scopedSlots: {
      customRender: 'is_enable',
    },
  },
  {
    title: '是否允许选品',
    scopedSlots: {
      customRender: 'can_distribution',
    },
  },
  // {
  //   title: '资料证书',
  //   dataIndex: 'certificate',
  //   scopedSlots: {
  //     customRender: 'certificate'
  //   }
  // },
  // {
  //   title: '身份证正面',
  //   dataIndex: 'id_card_front',
  //   scopedSlots: {
  //     customRender: 'id_card_front'
  //   }
  // },
  // {
  //   title: '身份证反面',
  //   dataIndex: 'id_card_reverse',
  //   scopedSlots: {
  //     customRender: 'id_card_reverse'
  //   }
  // },
  {
    title: '操作',
    width: 160,
    scopedSlots: {
      customRender: 'action',
    },
  },
]
const userColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户信息',
    scopedSlots: { customRender: 'baseinfo' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  components: {
    tabList,
    SearchCloudPlatform,
    cyyUploadImg,
    STable,
    Address,
  },

  data() {
    return {
      // 搜索参数
      queryParam: {
        page: 1,
        limit: 10,
        tel: '',
        name: '',
        is_enable: '-1',
      },
      columns,
      userColumns,
      list: [],
      goods_list: [],
      // 是否显示创建商户弹窗
      showCreated: false,
      // 新增 编辑商户的表单
      businessForm: {
        store_id: '',
        saas_user_id: '',
        type: '',
        saas_user_mobile: null,
      },
      businessRules: {
        store_id: [{ required: true, message: '请选择店铺', trigger: 'change' }],
        saas_user_id: [{ required: true, message: '请选择用户', trigger: 'change' }],
        type: [{ required: true, message: '请选择供货商类型', trigger: 'blur' }],
      },
      cloudPlatform_list: [],
      cloudPlatform_id_list: '',
      select_CloudPlatform_visible: false,
      showSetCloudPlatform: false,
      show_status: {
        appoint_type: 1,
      },
      form: this.$form.createForm(this),
      // 是否展示充值弹窗
      showRecharge: false,
      // 充值表单
      rechargeForm: {
        price: '',
      },
      rechargeRules: {
        price: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
      },
      // 当前操作的商户
      currentBusiness: {},
      storeList: [],
      type: 1, // 1新增商户 2修改商户
      visible: false,
      keyword: '',
      loadUserData: (parameter) => {
        return getSelectUserList({
          ...parameter,
          type: 'user',
          keyword: this.keyword,
        }).then((res) => {
          return res.data
        })
      },

      address_info: {
        province_id: '',
        district_id: '',
        city_id: '',
      },
      saas_user_mobile: null,
      level: [],
      level_id: 0,
      isSetLevel: false,
      cloud_store_id: 0
    }
  },

  created() {
    this.getList()

    this.storeGetList()
  },

  filters: {
    listStatus(val) {
      if (val == 1) {
        return 'background-color:#65c817;'
      }

      if (val == 0) {
        return 'background-color:#ff0000;'
      }
    },
  },

  computed: {
    getPopTitle() {
      return this.type === 1 ? '创建商户' : '修改商户'
    },

    getStatus() {
      return (status) => {
        let str = '未知'

        switch (parseInt(status)) {
          case 0:
            str = '禁用'
            break

          case 1:
            str = '启用'
            break
        }

        return str
      }
    },
  },

  watch: {
    showCreated(e) {
      if (!e) {
        this.$refs['businessForm'].resetFields()
      }
    },
  },

  methods: {
    setMchLevel(item) {
      this.cloud_store_id = item.cloud_store.id
      this.level_id = item.cloud_store.level_id
      this.isSetLevel = true
    },

    submitMchLevel() {
      let {level_id, cloud_store_id} = this;

      setMchLevel({
        id: level_id,
        cloud_store_id
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.isSetLevel = false
          this.getList()
          return;
        }

        this.$message.error(res.msg)
      })
    },

    onChange(item) {
      let { can_distribution, store_cloud_id: id } = item,
        value = can_distribution === '1' ? '0' : '1'

      setCanDistribution({
        can_distribution: value,
        id,
      }).then((res) => {
        if (!res.code) {
          this.$message.success(res.msg)
          this.$set(item, 'can_distribution', value)
          return
        }

        this.$message.error(res.msg)
      })
    },
    changeStatus({ id }, is_enable) {
      this.$confirm({
        title: '提示?',
        content: `是否${is_enable ? '启用' : '禁用'}？`,
        onOk: () => {
          storeMchEnable({
            id,
            is_enable,
          }).then((res) => {
            if (res.code === 0) {
              this.$message.success(res.msg)
              this.tablePageChange(1)
              return
            }

            this.$message.error(res.msg)
          })
        },
        onCancel() {},
      })
    },

    storeGetList() {
      storeGetList().then((res) => {
        if (res.code) return
        this.storeList = res.data
      })
    },

    // 关闭弹窗的回调
    closeModal(e) {
      console.log(e)
      if (e == 'businessForm') {
        this.businessForm.saas_user_id = ''
        this.businessForm.cloud_store_id = ''
        this.businessForm.type = ''
        this.saas_user_name = ''
        this.businessForm.saas_user_mobile = this.saas_user_mobile = null
      } else {
        this.$refs[e].resetFields()
      }
    },
    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },
    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await saasBusinessList(this.queryParam)
      if (res.code == 0) {
        this.list = res.data.list
        this.totalCount = res.data.count
      }
      const LevelRes = await getUserLevel({status: 1})
      if (LevelRes.code == 0) {
        this.level = LevelRes.data.list
      }
      hide()
    },
    //  云仓供货商
    toSetCloudPlatform(scope) {
      this.currentBusiness = scope
      this.cloudPlatform_list = []
      this.cloudPlatform_id_list = ''
      var s = this
      if (scope.cloud_platform_list) {
        var newObj = {
          ids: JSON.parse(scope.cloud_platform_list),
        }
        supplierList(newObj).then((res) => {
          if (res.code == 0) {
            s.cloudPlatform_list = res.data.list
          } else {
          }
        })
        this.cloudPlatform_id_list = scope.cloud_platform_list
      }
      this.showSetCloudPlatform = true
    },
    //  取消选中云仓供货商
    cancelCloudPlatform(index, item) {
      if (this.cloudPlatform_id_list) {
        var ids = JSON.parse(this.cloudPlatform_id_list)
        for (var i in ids) {
          if (ids[i] == item.id) {
            ids.splice(i, 1)
          }
        }
        this.cloudPlatform_id_list = ids.length ? JSON.stringify(ids) : ''
      }
      this.cloudPlatform_list.splice(index, 1)
    },
    //  云仓供货商
    setCloudPlatform() {
      this.btnLoading = true
      var params = {
        cloud_store_id: this.currentBusiness.cloud_store.id,
        cloud_platform_list: this.cloudPlatform_id_list,
      }
      const res = setCP(params).then((res) => {
        if (res.code == 0) {
          this.showSetCloudPlatform = false
          this.cloudPlatform_list = []
          this.cloudPlatform_id_list = ''
          this.getList()
        }
        this.btnLoading = false
      })
    },
    selectCloudPlatformModal() {
      this.select_CloudPlatform_visible = !this.select_CloudPlatform_visible
    },
    selectCloudPlatformOk(e) {
      console.log(e)
      var id = this.cloudPlatform_id_list ? JSON.parse(this.cloudPlatform_id_list) : []
      for (var i in e) {
        id.push(parseInt(e[i].id))
      }
      if (this.cloudPlatform_list.length) {
        for (var i in e) {
          this.cloudPlatform_list.push(e[i])
        }
      } else {
        this.cloudPlatform_list = e
      }
      this.$nextTick(() => {
        this.cloudPlatform_id_list = id.length ? JSON.stringify(id) : ''
        // this.form.setFieldsValue({
        //   cloudPlatform_id_list: JSON.stringify(id),
        // })
      })
    },
    // 点击充值
    toRecharge(scope) {
      this.currentBusiness = scope
      this.showRecharge = true
    },
    // 商户充值
    recharge() {
      this.$refs['rechargeForm'].validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          this.rechargeForm.id = this.currentBusiness.id
          const res = await recharge(this.rechargeForm)
          if (res.code == 0) {
            this.showRecharge = false
            this.getList()
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    // 点击创建商户
    editBusiness() {
      this.$refs['businessForm'].validate(async (valid) => {
        if (valid) {
          let { address_info, businessForm } = this,
            form = JSON.parse(JSON.stringify(businessForm)),
            res

          if (!address_info) {
            this.$message.error('请选择省市区~')
            return
          }

          this.btnLoading = true

          if (this.type === 2) {
            res = await editBusiness({
              ...form,
              ...address_info,
            })
          } else {
            res = await creatBusiness({
              ...form,
              ...address_info,
            })

            this.storeGetList()
          }

          if (res.code == 0) {
            this.showCreated = false
            this.getList()
            this.$message.success(res.msg)
            this.address_info = {
              province_id: '',
              district_id: '',
              city_id: '',
            }
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    // 点击编辑商户
    toEdit(scope) {
      let types = 1
      console.log(scope)
      if (scope) {
        let {
          id: cloud_store_id,
          logo,
          name,
          tel,
          password,
          type,
          certificate,
          id_card_front,
          id_card_reverse,
        } = scope.cloud_store
        this.businessForm = {
          cloud_store_id,
          logo,
          name,
          tel,
          password,
          type,
          certificate,
          id_card_front,
          id_card_reverse,
        }
        types = 2
      } else {
        this.businessForm = {
          cloud_store_id: '',
          logo: '',
          name: '',
          tel: '',
          password: '',
          type: '',
          certificate: '',
          id_card_front: '',
          id_card_reverse: '',
        }
      }
      this.type = types
      this.showCreated = true
    },

    // 点击删除商户
    delBusiness(scope) {
      const that = this
      this.$confirm({
        title: '是否删除商户？',
        async onOk() {
          const res = await businessDel({ cloud_store_id: scope.id })
          if (res.code == 0) {
            that.getList()
            that.storeGetList()
          }
        },
        onCancel() {},
      })
    },
    // 选择用户
    onSelect(item) {
      this.$set(this.businessForm, 'saas_user_id', item.id)
      this.saas_user_name = item.name
      this.saas_user_mobile = item.mobile
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}
.tip {
  line-height: normal;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
.pic {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 4px;
}

.tagBox {
  display: flex;
  align-items: center;
}

.tag {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
</style>
